.box {}

.left {
    background-color: #fdf0e0;
    width: 280px;
}

.right {
    background-color: #fbe2c3;
    width: calc(100% - 280px);
    position: relative;
    padding: 30px 40px;
}

.logo {
    padding: 30px 0 30px;
}

.ul {}

.ul .content {
    width: 180px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #f0b245;
    margin: 20px auto 0;
    cursor: pointer;
    transition: all .3s ease;
}

.ul i {
    display: block;
    display: flex;
    width: 20px;
    justify-content: center;
}

.ul span {
    display: block;
    width: 5em;
    margin-left: 10px;
}

.ul .hover-box {
    height: 0;
    overflow: hidden;
    transition: all 1s linear;
}

.ul.actived .content,
.ul:hover .content {
    color: #fff;
    background-color: #f0b245;
}

.ul:hover .hover-box,
.ul.active .hover-box {
    height: max-content;
}

.ul:hover .li,
.ul:active .li {
    transform: translateX(0px);
    opacity: 1;
}

.li {
    width: 140px;
    height: 40px;
    border-radius: 20px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: row-reverse;
    margin: 10px auto 0;
    cursor: pointer;
    transition: all .3s ease;
    color: #5b4218;
    transform: translateX(-15px);
    opacity: 0;
}

.li span {
    margin: 0;
    width: max-content;
}

.li:hover,
.li.actived {
    background-color: rgb(239, 105, 105);
    color: #fbe2c3;
}

.head {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-item img {
    transition: all .3 linear;
}

.card-item:hover img {
    animation: moveAnim 3s infinite ease-in;
}

@keyframes moveAnim {
    0% {
        top: 30px;
        left: 30px;
    }

    25% {
        top: 30px;
        left: 35px;
    }

    50% {
        top: 40px;
        left: 40px;
    }

    75% {
        top: 35px;
        left: 30px;
    }

    100% {
        top: 30px;
        left: 30px;
    }
}